<template>
  <div class="ele-body" v-if="activeName==='bom'">
    <div shadow="none" class="topCard">

      <div class="topItemWrap">
        <div v-for="item in topData" :key="item.title" class="topItemStyle">
          <div :style="[{fontWeight: 800,background: styleKey[item.title].bg}]" class="topItem">
            <div>{{ item.title }}</div>
            <div>{{ item.target }}</div>
          </div>
        </div>
      </div>
    </div>
    <div id="bomLineChart" class="bomLineChart">


    </div>

    <div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column width="180">
          1
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
    </div>
    <div id="BomCenter" class="BomCenterLineChart">

    </div>

    <div shadow="none" class="bottomCard">

      <div class="topItemWrap">
        <div v-for="item in bottomData" :key="item.title" class="topItemStyle">
          <div :style="[{fontWeight: 800,background: BottomStyle[item.title].bg}]" class="topItem">
            <div>{{ item.title }}</div>
            <div>{{ item.target }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomGroupWrap">
      <div class="bottomItem" id="bottomChart1"></div>
      <div class="bottomItem" id="bottomChart2"></div>
      <div class="bottomItem" id="bottomChart3"></div>
      <div class="bottomItem" id="bottomChart4"></div>
      <div class="bottomItem" id="bottomChart5"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  props: ['activeName'],
  data() {
    return {
      echartsGroup: [],
      styleKey: {
        'BC类总体满足率': {bg: '#e4f4ef', fc: '#1fa881'},
        '4小时到位率': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时完工率': {bg: '#fff5d6', fc: '#fed13b'},
        '30天交货率': {bg: '#f5f5f5', fc: '#c5c5c5'}
      },
      BottomStyle: {
        '本月申请单': {bg: '#e4f4ef', fc: '#1fa881'},
        '本月未发单': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时签收率': {bg: '#fff5d6', fc: '#fed13b'},
        '48小时签收率': {bg: '#f5f5f5', fc: '#c5c5c5'},
        '7天签收率': {bg: '#f5f5f5', fc: '#c5c5c5'}
      },
      topData: [
        {
          title: 'BC类总体满足率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '销售产品', url: '#'},
            {title: '销售税条件', url: '#'},
            {title: '销售合计', url: '#'}
          ]
        },
        {
          title: '4小时到位率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
        {
          title: '24小时完工率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
      ],
      bottomData: [
        {
          title: '本月申请单',
          target: '1500'
        },
        {
          title: '本月未发单',
          target: '90%'
        },
        {
          title: '24小时签收率',
          target: '90%'
        },
        {
          title: '48小时签收率',
          target: '90%'
        },
        {
          title: '7天签收率',
          target: '90%'
        },
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('bomLineChart');
      let myChart1 = echarts.init(chartDom);
      this.echartsGroup.push(myChart1)

      let option;
      option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },

        ]
      };
      option && myChart1.setOption(option);

    },
    initChartBomCenter() {
      const chartDom = document.getElementById('BomCenter');
      let myChart2 = echarts.init(chartDom);
      this.echartsGroup.push(myChart2)

      let option;

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };

      option && myChart2.setOption(option);
    },
    initBottomChart1() {
      const chartDom = document.getElementById('bottomChart1');
      let myChart3 = echarts.init(chartDom);
      this.echartsGroup.push(myChart3)
      let option;

      option = {
        title: {
          show: true,
          text: "主标题",
        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200],
            type: 'bar',
          }
        ]
      };

      option && myChart3.setOption(option);

    },
    initBottomChart2() {
      const chartDom = document.getElementById('bottomChart2');
      let myChart4 = echarts.init(chartDom);
      this.echartsGroup.push(myChart4)
      let option;

      option = {
        title: {
          show: true,
          text: "主标题",
        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200],
            type: 'bar',
          }
        ]
      };

      option && myChart4.setOption(option);

    },
    initBottomChart3() {
      const chartDom = document.getElementById('bottomChart3');
      let myChart5 = echarts.init(chartDom);
      this.echartsGroup.push(myChart5)
      let option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        title: {
          show: true,
          text: "主标题",
        },
        legend: {
          bottom: '2%',
          left: 'center',
          itemHeight: 10, // 修改icon图形大小
          itemGap: 4, // 修改间距
          textStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
            ]
          }
        ]
      };

      option && myChart5.setOption(option);


    },
    initBottomChart4() {
      const chartDom = document.getElementById('bottomChart4');
      let myChart6 = echarts.init(chartDom);
      this.echartsGroup.push(myChart6)
      let option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        title: {
          show: true,
          text: "主标题",
        },
        legend: {
          bottom: '2%',
          left: 'center',
          itemHeight: 10, // 修改icon图形大小
          itemGap: 4, // 修改间距
          textStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
            ]
          }
        ]
      };

      option && myChart6.setOption(option);


    },
    initBottomChart5() {
      const chartDom = document.getElementById('bottomChart5');
      let myChart7 = echarts.init(chartDom);
      this.echartsGroup.push(myChart7)
      let option;

      option = {
        tooltip: {
          trigger: 'item'
        },

        title: {
          show: true,
          text: "主标题",
        },
        legend: {
          bottom: '2%',
          left: 'center',
          itemHeight: 10, // 修改icon图形大小
          itemGap: 4, // 修改间距
          textStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
            ]
          }
        ]
      };

      option && myChart7.setOption(option);


    },
  },
  mounted() {
  }
};
</script>
<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.ele-body {
  font-size: px2vh(16);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.topCard {
  border-radius: px2vh(5);
  display: flex;
  background-color: #fff;
  height: px2vh(100);
  line-height: px2vh(40);
  text-align: center;
}

.topItemWrap {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.topItem {
  display: flex;
  justify-content: space-around;
  border-radius: px2vw(5);
  width: px2vw(400);
  height: px2vh(40);
}

.bomLineChart {
  border-radius: px2vh(5);
  background-color: #fff;
  margin-top: px2vh(20);
  width: 100%;
  height: px2vh(300);
}

.BomCenterLineChart {
  border-radius: px2vh(5);
  background-color: #fff;
  margin-top: px2vh(20);
  width: 100%;
  height: px2vh(280);
}

.bottomCard {
  margin-top: px2vh(20);
  border-radius: px2vh(5);
  display: flex;
  background-color: #fff;
  height: px2vh(100);
  line-height: px2vh(40);
  text-align: center;

  .topItemWrap {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .topItem {
      display: flex;
      justify-content: space-around;
      border-radius: px2vw(5);
      width: px2vw(250);
      height: px2vh(40);
    }
  }
}

.bottomGroupWrap {
  display: flex;
  justify-content: space-around;
  margin-top: px2vh(20);

  .bottomItem {
    width: px2vw(250);
    height: px2vh(200);
    box-sizing: border-box;
    background: #fff;
    padding: px2vh(5) px2vw(10);
    border-radius: px2vw(10);
  }
}

</style>
